<template>
  <view class="touch">
    <view class="bg-top">
      <view class="bg-image">
        <view class="status_bar">
          <view class="top_view"></view>
        </view>
        <view class="chat-right lmqicon uni-icon-chat"></view>
      </view>
    </view>
    <view class="centent">
      <navigator
        hover-class="none"
        url="../../MyPage/personDetail"
        class="centent-info"
      >
        <view class="left-info">
          <view class="my-info">
            <image src="../../../static/yfb/my/touxiang.jpg"></image>
          </view>
          <view class="my-name">
            <view class="my-name-name">文文文文文 <text></text></view>
            <view>13655000320</view>
          </view>
        </view>
        <view class="lmqicon uni-icon-leftjiantou1"></view>
      </navigator>
    </view>
    <view class="fill"></view>
    <view class="grace-bg-white ">
      <view class="grace-list anyone">
        <navigator
          url="../../MyPage/bill"
          class="items bill"
        >
          <view class="icons">
            <image
              src="../../../static/yfb/my/账单@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">账单
            <text></text>
          </view>
          <view class="arrow-right arrow-right-one"></view>
        </navigator>
      </view>
    </view>
    <!-- 列表页面 -->
    <view class="grace-bg-white grace-common-mt">
      <view class="grace-list">
        <navigator
          url="../../MyPage/securitySettings"
          class='items bill'
         >
          <view class="icons">
            <image
              src="../../../static/yfb/my/安全设置@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">安全设置<text>手机号、密码</text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </navigator>
        <view
          url="../../MyPage/biologicalRecognition"
          class='items bill'
        >
          <view class="icons">
            <image
              src="../../../static/yfb/my/生物识别@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">生物识别<text>人脸、指纹、声纹</text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
        <view
          url="../../MyPage/PaymentSettings"
          class='items bill'
        >
          <view class="icons">
            <image
              src="../../../static/yfb/my/支付设置@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">支付设置<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
        <view
          url="../../MyPage/commonUse"
          class='items bill'
        >
          <view class="icons">
            <image
              src="../../../static/yfb/my/通用@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">通用<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
      </view>
    </view>

    <!-- 第二个列表 -->

    <view class="grace-bg-white grace-common-mt">
      <view class="grace-list">
        <view class='items bill'>
          <view class="icons">
            <image
              src="../../../static/yfb/my/隐私@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">隐私<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
        <view url="../../MyPage/feedback" class='items bill'>
          <view class="icons">
            <image
              src="../../../static/yfb/my/求助反馈@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">求助反馈<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
        <view class='items bill'>
          <view class="icons">
            <image
              src="../../../static/yfb/my/关于@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">关于<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
      </view>
    </view>
    <!-- 第二个列表结束 -->

    <!-- 第三个列表 -->
    <view class="grace-bg-white grace-common-mt">
      <view class="grace-list">
        <view class='items bill'>
          <view class="icons">
            <image
              src="../../../static/yfb/my/换账号登录@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">换账号登录<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>
        <view class='items bill'>
          <view class="icons">
            <image
              src="../../../static/yfb/my/求助反馈@2x.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="title">退出登录<text></text></view>
          <view class="arrow-right  arrow-right-one"></view>
        </view>

      </view>
    </view>
    <!-- 第三个列表结束 -->
    <!-- 结束列表页面 -->
    <!-- <view class="grace-list grace-bg-white">
      <navigator url="../../MyPage/bill" class="items">
        <view class="title">账单
          <text></text>
        </view>
        <view class="arrow-right"></view>
      </navigator>
    </view>
    <view class="grace-list grace-bg-white grace-common-mt">
      <navigator url="../../MyPage/securitySettings" data-index="1" class="items">
        <view class="title">安全设置
          <text>手机、密码</text>
        </view>
        <view class="arrow-right"></view>
      </navigator>
      <navigator url="../../MyPage/biologicalRecognition" data-index="2" class="items">
        <view class="title">生物识别
          <text>人脸、指、声纹</text>
        </view>
        <view class="arrow-right"></view>
      </navigator>
      <navigator url="../../MyPage/PaymentSettings" data-index="4" class="items">
        <view class="title">支付设置
          <text></text>
        </view>
        <view class="arrow-right"></view>
      </navigator>
      <navigator url="../../MyPage/commonUse" data-index="5" class="items">
        <view class="title">通用</view>
        <view class="arrow-right"></view>
      </navigator>
      <navigator url="../../MyPage/privacy" data-index="6" class="items">
        <view class="title">隐私</view>
        <view class="arrow-right"></view>
      </navigator>
      <navigator url="../../MyPage/feedback" data-index="7" class="items">
        <view class="title">求助反馈</view>
        <view class="arrow-right"></view>
      </navigator>
    </view>

    <view class="grace-list grace-bg-white grace-common-mt">
      <view class="items">
        <view class="title">换账号登录</view>
        <view class="arrow-right"></view>
      </view>
      <view class="items">
        <view @tap="ToLogin" class="title">退出登录 -->
    <!-- <switch checked style='float:right'></switch> -->
    <!-- </view>
        <view class="arrow-right"></view>
      </view>
    </view>
    <view style="width:100%; height:5px;"></view> -->
  </view>
</template>

<script>
import graceHeader from "@/graceUI/components/graceHeader";
export default {
  data() {
    return {};
  },
  methods: {
    openinfo(e) {
      console.log(e);
      uni.navigateTo({});
    },
    ToLogin() {
      uni.reLaunch({
        url: "../../LoginPage/Login"
      });
    }
  },
  components: {
    graceHeader
  }
};
</script>

<style lang="scss" scoped>
.bill {
  display: flex;
  align-items: center;
  height: 44px;
}
.arrow-right-one {
  //   display: flex;
  //     align-items: center !important;
  // line-height: 56px !important;
}
.grace-list .items .icons {
  width: 40upx;
  height: 46upx;
  line-height: 46upx;
  text-align: center;
  margin: 18px 0 15px 15px;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0;
}

.grace-list .items .icons image {
  // width: 36upx;
  // height: 36upx;
}

.bg-image {
  background-image: url("");
  width: 100%;
  background-size: cover;
  height: 300upx;
}
.bg-top {
  // height: 319upx;
}
.chat-right {
  padding-right: 5%;
  text-align: right;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  z-index: 9999999999999;
  top: 0;
  left: 0;
}
.centent {
  position: absolute;
  left: calc(50% - 346upx);
  // top: calc(50% - 492upx);
  top: 170upx;
  width: 690upx;
  height: 228upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10px 51px 0px rgba(228, 229, 237, 1);
  border-radius: 10px;
  z-index: 9999;
}
.centent-info {
  display: flex;
  padding: 0 2%;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 86%;
  margin: 0 auto;
  .my-info {
    width: 128upx;
    height: 128upx;
    background: rgba(255, 255, 255, 1);
    border: 6px solid rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 9px 0px rgba(239, 242, 246, 1);
    border-radius: 10px;
    // background: red;
    // padding: 6upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .my-name {
    padding-left: 30upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .my-name-name {
      display: flex;
      align-items: center;
    }
    text {
      display: inline-block;
      width: 24upx;
      height: 24upx;
      background: url("../../../static/yfb/my/erweima.png");
      background-size: cover;
      line-height: 24upx;
      margin-left: 10upx;
    }
  }
  .left-info {
    display: flex;
  }
}
.fill {
  height: 100upx;
  width: 100%;
  background: #ffffff;
}
.arrow-right-top {
  font-family: "grace-iconfont" !important;
  font-size: 36rpx;
  font-style: normal;
  height: 56px;
  line-height: 56px;
  text-align: center;
  width: 30px;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
}
.arrow-right-top ::before {
  content: "\e601";
  color: #b2b2b2;
}
.grace-rows-demo {
  height: 118upx;
  color: #ffffff;
  width: 100%;
  line-height: 118upx;
}

.grace-blod {
  font-weight: 100;
}

.grace-list .items .arrow-right {
  margin-right: 6upx;
  height: 46px;
  line-height: 46px;
}

.grace-list .items .title {
  height: 14upx;
  line-height: 14upx;
}

.grace-common-mt {
  margin-top: 20upx;
}

/* .title {
    height: 20upx;
    line-height: 20upx;
    margin-left: 80px;
  } */
.anyone {
  border: none;
}
.title {
  margin-right: 12px;
}
.uni-icon-chat {
  color: white;
}
</style>